<template>
     <div ref="pages" >
        <div class="tabview newsPageDiv">
           <Breadcrumb 
            :breadcrumbName="breadcrumbName"
            :routerLikeTo="routerLikeTo"
          />
          <span class="news-text">举报投诉结果</span>   
           <a-divider style="margin: 20px 0;" />
           <div style="margin-top:40px;">
             <a-divider type="vertical" style="width:4px; background: #337BD7; height: 20px;margin-top: -4px;margin-left:0px;" />
             <span class="report-detail-title">详细信息</span>
           </div>
           <!-- <a-spin size="large" :spinning="loading" style="width:100%; text-align: center;" /> -->
           <div class="report-detail-one">
            <a-descriptions bordered  size="small" style="margin-top:20px;">
              <a-descriptions-item label="标题" span="3" >
                  <span class="item-content">{{detailInfoData.title}}</span>
              </a-descriptions-item>
              <a-descriptions-item label="内容" span="3" >
                  <span class="item-content">{{detailInfoData.descripetion}}</span>
              </a-descriptions-item>
              <a-descriptions-item label="问题类型" span="3" >
                  <span class="item-content">{{detailInfoData.quesType}}</span>
              </a-descriptions-item>
              <a-descriptions-item label="图片" span="3" >
                <!-- <template v-for="item in detailInfoData.pics"> -->
                  <span >
                    <img class="report-img1" style="margin-bottom:10px;margin-right:10px;" :src="imgPath+item.path" v-for="(item,index) in detailInfoData.pics" :key="index" alt="">
                  </span>
                <!-- </template> -->
              </a-descriptions-item>
            </a-descriptions>
           </div>
           
           <div style="margin-top:40px;margin-bottom:30px;" v-if="status=='已办结' || status=='已处理' ">
             <a-divider type="vertical" style="width:4px; background: #337BD7; height: 20px;margin-top: -4px;margin-left:0px;" />
             <span class="report-detail-title">受理回复</span>
           </div>
           <div class="report-detail-two"  v-if="status=='已办结' || status=='已处理' ">
             <a-descriptions bordered  size="small" style="margin-top:20px;">
                <a-descriptions-item label="处理状态 " span="3" >
                    <span class="item-content">{{detailInfoData.processStatus}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="答复内容 " span="3" >
                    <span class="item-content item-content-item">{{detailInfoData.awsContent}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="答复机构 " span="1.5" >
                    <span class="item-content">{{detailInfoData.awsJigou}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="答复时间 " span="1.5" >
                    <span class="item-content">{{detailInfoData.awsTime}}</span>
                </a-descriptions-item>
                <a-descriptions-item label="下载附件" span="3"> 
                    <template v-for="(item,index) in detailInfoData.fileupload">
                      <div  :key="index" style="margin-bottom:5px;" >
                        <span class="item-content-fj" @click="downloadPDf(item)">{{item.name}}</span>
                      </div>
                    </template>
                </a-descriptions-item>
              </a-descriptions>
           </div>
        </div>
       <!-- <footerPage :page="4" ></footerPage> -->
       
    </div>
</template>

<script>
// import moment from "moment";
import Breadcrumb from "@/components/base/tools/Breadcrumb1";
//  import footerPage from '../../footer/footerPage';
import emv from "@/views/center/emptyVue.vue";
import download from 'downloadjs'; // 引用插件
import api from '@/api/index'
  export default {
    name: "detail_report",
    inject: ["changeTab"],
     components: {
      Breadcrumb,
      //  footerPage,
    },

     data(){
 
      return{
        clientHeight:'',
        screenHeight:'',
        breadList: [],
        loading:true,
        breadcrumbName:'',
        routerLikeTo:'/center/reportCenterPage',
        id:"",
        itemData:{},
        status:'',
        imgPath:this.$globalConfig.adressPath,
        detailInfoData:{
          // title:'咨询水利企业安全生产标准化是怎么个申请流程?',
          // descripetion:'水务工程安装，供水和污水处理项目开发，水务及环保项目咨询，建筑工程、 市政工程项目管理及工程监理，工程造价咨询，投资管理咨询，工程技术咨 询服务，道路交通工程项目管理。（以上项目凡涉及许可经营的凭许可经营） ',
          // quesType:'留言投诉',
          // pics:[
          //   'http://slj.cq.gov.cn/sy_250/tpjj/202005/W020200528571545272838.jpg',
          //   'http://slj.cq.gov.cn/sy_250/tpjj/202005/W020200528571545272838.jpg',
          //   'http://slj.cq.gov.cn/sy_250/tpjj/202005/W020200528571545272838.jpg',
          //   'http://slj.cq.gov.cn/sy_250/tpjj/202005/W020200528571545272838.jpg',
          //   'http://slj.cq.gov.cn/sy_250/tpjj/202005/W020200528571545272838.jpg',
          //   'http://slj.cq.gov.cn/sy_250/tpjj/202005/W020200528571545272838.jpg',

          // ],
          // processStatus:'已处理',
          // awsContent: '你好，水利安全生产标准化等级分为一级、二级、三级。水利部负责水利安全生产标准化一级申报工作，申请材料须经省水利厅审查通过；省水利厅负责水利安全生产标准化二级申报工作，申请材料须经设区市水利‍（务）局审查通过；各设区市水利（务）局负责水利安全生产标准化三级申报工作‍。申请江苏省水利安全生产标准化二级，执行《江苏省水利安全生产标准化建设管理办法（试行）》（苏水规〔2016〕2号，以下简称《办法》）要求和《省水利厅关于修订江苏省水利安全生产标准化评价标准的通知》（苏水规〔2018〕5号）相关标准。申请单位应当满足《办法》第十条明确的基本条件，评价程序由《办法》第十一条明确。江苏省水利厅监督处2020年3月27日',
          // awsJigou:'海南省水务厅',
          // awsTime: '2020-06-20',
          // downFile:[
          //   {
          //     name:' 各市联系方式.docx  点击下载 ',
          //     link:'http://59.50.77.74:8086/admin/File/wzxx_cf/202097111009509.pdf',
          //   },
          //    {
          //     name:' 各市联系方式1.docx  点击下载 ',
          //     link:'http://59.50.77.74:8086/admin/File/wzxx_cf/202097111009509.pdf',
          //   },
          // ]
        },
      }
      
    },
    mounted(){
     this.$nextTick(()=>{ // 页面渲染完成后的回调
                  this.getScreenHeight();
                  this.clientHeight = this.$refs.pages.offsetHeight+364;
                  // console.log(this.screenHeight,this.clientHeight);
                  if(this.screenHeight>this.clientHeight){
                    if(this.screenHeight-this.clientHeight>40){
                      emv.$emit("setfootmargintop",this.screenHeight-this.clientHeight);
                    }else{
                       emv.$emit("setfootmargintop",40);
                    }
                  }else{
                    emv.$emit("setfootmargintop",40);
                  }
                 
          });

    },
    created(){
      this.changeTab(7, "reportCenterPage", '<span class="tab_name">举报投诉</span>');
      emv.$emit("setfootmargintop",40);
      this.breadcrumbName = this.$route.query.breadcrumbName;
      this.id = this.$route.query.id
      // this.detailInfoData = eval('(' + this.$route.query.item + ')')
      this.get_report_data();
      
    },
    methods: {
      getScreenHeight(){
        // 获取浏览器可视区域高度
        this.screenHeight =    document.body.clientHeight ; //`${document.documentElement.clientHeight}` 
        window.onresize = function temp() {
          this.screenHeight = document.body.clientHeight;
        };
      },
      get_report_data(){
         api.get_report_by_id(this.id).then(res => {
              this.detailInfoData = res;
              this.loading = false;
              this.status = this.detailInfoData.processStatus;
                let picsData = this.detailInfoData.pics;
                if(picsData!=null && picsData!=""){
                  this.detailInfoData.pics = JSON.parse(this.detailInfoData.pics);
                }

                let fileData = this.detailInfoData.fileupload;
                if(fileData!=null && fileData!=""){
                  this.detailInfoData.fileupload = JSON.parse(this.detailInfoData.fileupload)
                }
                
               this.status = this.detailInfoData.processStatus;  
          })
          .catch(err => {
            this.loading = false;
          });
      },
      downloadPDf(item){
       download("/api"+item.path); 
      }
    },
  
  };
</script>
<style lang="less">
.breadcrumb{
  margin-top: 20px;
  margin-bottom: 15px;
  
}
.report-detail-div{
  margin-top:12px;   
}

.report-detail-title{
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
  margin-left: 8px;
}
.report-detail-two{
  .ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-label, .ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-content {
    padding: 24px 16px;
    text-align: center;
    color: #333333;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    width: 150px;
  }
  .ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-content{
    padding: 24px 16px;
    text-align: left;
    color: #333333;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    // width: 150px;
  }
  .ant-descriptions-view {
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    margin-top: -10px;
  }
  .item-content-fj{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    text-decoration: underline;
    color: #FF0000;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .item-content-fj:hover{
    color: #f50000;
    font-weight: 600;
  }
   .item-content{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
  .item-content-item{
    line-height: 2;
  }
}
.report-detail-one{
  .ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-label{
    padding: 24px 16px;
    text-align: center;
    color: #333333;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    width: 150px;
  }
  .ant-descriptions-bordered.ant-descriptions-small .ant-descriptions-item-content{
    padding: 24px 16px;
    text-align: left;
    color: #333333;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }
}
.report-img1{
  width: 28%;
  max-width: 100%;
  // height: 160px;
}
</style>